import DebounceMultipleSelect from '@/components/DebounceMultipleSelect';
import DynamicStoreSelect from '@/components/DynamicStoreSelect';
import ShopSearch from '@/components/ShopSearch';
import FuzzyQueryStore from "@/components/FuzzyQueryStore";
import SelectShopInput from"@/components/SelectShopInput";
import IconFont from '@/components/IconFont';
import { Input, Select, DatePicker, InputNumber } from 'antd';
import styles from './index.module.less';
const { RangePicker } = DatePicker;
import moment from 'moment';

//渲染节点
const FormItem = (props) => {

  const { formType, handleSetForm, ...reset } = props;

  //是否选中了值
  const isPrefix = formType == 'select' ? (props.value || props.value == 0) : props.value;

  //prefix的文字
  const prefixStr = isPrefix ? props.placeholder : ' ';

  const style = {
    width: '210px'
  }

  const formConfig = {
    'Input': () => {
      return (
        <Input prefix={prefixStr} style={style} {...reset} />
      )
    },
    'InputNumber': () => (
      <InputNumber style={style} controls={false} {...reset} />
    ),
    'Select': () => {
      const fontSize = 12;
      const textWidth = isPrefix ? props.placeholder.length * fontSize + fontSize : fontSize / 2;
      const styleSelect = {
        "--prefix-select-padding-left": textWidth + "px",
        "--prefix-select-font-size": fontSize + "px",
      };
      return (
        <Select
          showSearch
          style={{ ...styleSelect, ...style }}
          className={styles.prefix_select}
          data-content={prefixStr}
          optionFilterProp="children"
          filterOption={(input, option) =>
            (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
          }
          {...reset}
        />
      )
    },
    'rangTime': () => {
      const fontSize = 12;
      const textWidth = isPrefix ? props.prefix.length * fontSize + fontSize : fontSize / 2;
      const styleSelect = {
        "--prefix-select-padding-left": textWidth + "px",
        "--prefix-select-font-size": fontSize + "px",
      };
      const prefixStr = isPrefix ? props.prefix : ' ';
      const style = {
        width: '432px',
        paddingLeft: isPrefix ? textWidth : 6
      }
      return (
        <RangePicker
          showTime 
          disabledDate={current => current && current > moment().endOf('day')}
          style={{ ...styleSelect, ...style }}
          className={styles.prefix_select}
          format="YYYY-MM-DD HH:mm:ss"
          data-content={prefixStr}
          {...reset}
        />
      )
    },
    'SearchSelect': () => {
      return (
        <DebounceMultipleSelect
          showSearch
          allowClear
          needFetchFirst
          labelInValue={false}
          style={style}
          showPrefix={true}
          dataContent={props.placeholder}
          {...reset}
        />
      )
    },
    'SearchSupplier': () => {
      const { formKey = 'storeIds' } = reset;
      return (
        <DynamicStoreSelect
          style={style}
          showPrefix={true}
          labelInValue={false}
          dataContent={props.placeholder}
          handleAllSelect={val => handleSetForm(formKey, val)}
          {...reset}
        />
      )
    },
    'searchEcStores': () => {
      const { formKey = 'ecStoreIds' } = reset;
      return (
        <ShopSearch
          style={style}
          handleOk={val => handleSetForm(formKey, val)}
          {...reset}
        />
      )
    },
    'noLabelRangTime': () => {
      return (
        <RangePicker
          showTime 
          disabledDate={current => current && current > moment().endOf('day')}
          format="YYYY-MM-DD HH:mm:ss"
          {...reset}
        />
      )
    },
    'noLabelSelect': () => {
      return (
        <Select
          showSearch
          optionFilterProp="children"
          filterOption={(input, option) =>
            (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
          }
          {...reset}
        />
      )
    },
    'storeNameSearch': () => {
      return (
        <FuzzyQueryStore 
          width="210px"
          {...reset}
        />
      )
    },
    'IconFont': () => {
      return (
        <IconFont {...reset} />
      )
    },
    'SelectShop': () => {
        const { formKey = 'ecStoreIds' } = reset;
        return (
            <SelectShopInput 
               handleOk={val => handleSetForm(formKey, val)}
               prefix={prefixStr}
               style={style}
              {...reset}
            />
        )
    }
  }
  return formConfig[formType]();
}

export default FormItem;
